<template>
	<view class="swiper-box">
		<uni-swiper-dot :dots-styles="dotsStyles" :info="6" :current="current" field="content" :mode="mode">
			<swiper autoplay @change="change">
				<swiper-item  v-for="(item ,index) in bannerData" :key="index">
					<view @click="goArticle(item)" class="swiper-item">
						<image :src="BASE_IMG + item.img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const current = ref(0)
	const mode = ref('round')
	const dotsStyles = ref({
		backgroundColor: 'rgba(255, 255, 255, 0.9)',
		border: '1px rgba(255, 255, 255, 0.9) solid',
		color: '#fff',
		selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
		selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
	})

	function change(e) {
		current.value = e.detail.current
		
	}
	function goArticle(item){
		
		uni.navigateTo({
			url:'/pages/article-details/article-details?id='+ item.id
		})
	}
	
	import {apiGetBanner} from '@/api/articleApi.js';
	import { BASE_IMG } from '@/utils/imgComBaseUrl.js';
	const bannerData = ref([])
	async function getBanner(){
		const {data} = await apiGetBanner();
		bannerData.value = data
	}
	getBanner()
</script>

<style lang="scss" scoped>
	.swiper-box {
		width: 750rpx;
		padding: 30rpx 0;

		swiper {
			width: 100%;
			height: 340rpx;
			padding: 0 30rpx;

			&-item {
				width: 100%;
				height: 100%;

				.swiper-item {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			}
		}
	}
</style>